<script setup>
import { ref, onMounted, reactive } from 'vue'
import { getStatisticsApi } from '@/api/statistics'
import { ElMessage } from 'element-plus'
import Page from '@/components/page/Page.vue'
const username = ref('')
const year = ref(new Date().getFullYear())
const month = ref(new Date().getMonth() + 1)
const tableData = ref([])
const total = ref(0)
const pageNum = ref(1)
const pageSize = ref(10)
const deleletDialog = ref(false)

// 方法区
const pageChange = (size, num) => {
    console.log(size, num)
    pageSize.value = size
    pageNum.value = num
    gettableData()
}
const gettableData = async () => {
    console.log(year.value, month.value)
    const res = await getStatisticsApi(username.value, year.value, month.value, pageNum.value, pageSize.value)
    tableData.value = res.data.rows
    total.value = res.data.total
    console.log(res.data.total)
}


onMounted(async () => {
    gettableData()
})

</script>

<template>
    <div style="padding: 20px;background-color: aliceblue; width: 95%;margin: 0 auto;">
        <div>
            姓名：<el-input v-model="username" style="width: 200px;margin-right: 30px;" placeholder="请输入姓名" />
            年：<el-input v-model="year" type="number" placeholder="请输入年"
                style="width: 200px;margin-right: 30px;"></el-input>
            月：<el-input v-model="month" type="number" placeholder="请输入月"
                style="width: 200px;margin-right: 30px;"></el-input>
            <el-button type="primary" @click="gettableData">查询</el-button>
        </div>
        <el-table :data="tableData" style="width: 100%;margin-top: 40px;margin-bottom: 40px;height: 550px;">
            <el-table-column prop="username" label="用户名" />
            <el-table-column prop="endScore" label="得分" />
            <el-table-column prop="time" label="时间">

            </el-table-column>

        </el-table>
        <Page @change="pageChange" :pageNum="pageNum" :pageSize="pageSize" :total="total" v-if="total > 10" />
    </div>
</template>

<style lang="less" scoped></style>